<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS3 变量：实现动态布局</title>
	<style>
		.container{
			padding: 15px;
			box-sizing: content-box;
			--column: 4;
			--margin: calc(24px / var(--column));
			--width: calc((100% - var(--margin) * var(--column) * 2) / var(--column));
			min-width: 400px;
		}
		.card{
			display: block;
			box-sizing: border-box;
			width: var(--width);
			margin: var(--margin);
			min-height: 70px;
			float: left;
		}

		.red{
			border: 1px solid red;
		}
		.green{
			border: 1px solid green;
		}

		@media screen and (max-width: 1200px){
			.container{
				--column: 3;
			}
		}

		@media screen and (max-width: 500px){
			.container{
				--column: 2;
			}
		}
	</style>
</head>
<body>

	<div class="container">
		<div class="card red"></div>
		<div class="card red"></div>
		<div class="card green"></div>
		<div class="card red"></div>
		<div class="card red"></div>
		<div class="card green"></div>
		<div class="card red"></div>
		<div class="card green"></div>
		<div class="card green"></div>
	</div>
	
</body>
</html>